---
title: Web Fonts
slug: /web-fonts
section: User Interface
---

When building UIs in order to prevent a flash of unstyled content (a moment of default font/styling before the font loads) Excalibur has a built in resource type to help with that.

## Using FontSource

Using a [[FontSource]] will ensure the font is loaded and the font face is ready before the game starts!

```typescript
const fontSource = new ex.FontSource('/my-font.ttf', 'My Font')
loader.addResource(fontSource)

game.start(loader).then(() => {
  const font = fontSource.toFont() // returns ex.Font
})
```

Font options can be defined either at the source or at the `toFont()` call. If defined in both, `toFont(options)` will
override the options in the [[FontSource]].

```typescript
const fontSource = new ex.FontSource('/my-font.ttf', 'My Font', { 
  filtering: ex.ImageFiltering.Pixel,
  size: 16, // set a default size
})
const font = fontSource.toFont({
  // override just the size
  size: 20,
})
```